<div class="section gf-form-group" ng-mouseenter="editor.setCurrentParam('currentOptions',rule.getShapeMapOptions())"
    ng-mouseleave="editor.unsetCurrentParam('currentOptions')">
    <h5 class="section-heading">
        Color/Tooltip Mappings
        <info-popover mode="right-normal">
            <span ng-bind-html="$GF.popover('Select the objects to colorize', 'SHAPES','fc_subway_example')">
            </span>
        </info-popover>
    </h5>
    <div id="shapesOptionsGeneral">
        <!-- ID INPUT -->
        <div class="gf-form">
            <span class="gf-form-label width-11">Identify by
                <info-popover mode="right-normal">
                    <span
                        ng-bind-html="$GF.popover('Select the type of data in field \'What\' ID (uniq) or LABEL', 'SHAPES')">
                    </span>
                </info-popover>
            </span>
            <div class="gf-form-select-wrapper">
                <select class="gf-form-input width-10" ng-model="rule.getShapeMapOptions().identByProp"
                    ng-options="c.value as c.text for c in editor.propTypes"
                    ng-change="editor.onRulesChange()"></select>
            </div>
        </div>
        <!-- METADATA INPUT -->
        <div class="gf-form" ng-show="rule.getShapeMapOptions().identByProp === 'metadata'">
            <span class="gf-form-label width-11">Data name
                <info-popover mode="right-normal">
                    <span ng-bind-html="$GF.popover('Select a metadata name or a regex', 'SHAPES')">
                    </span>
                </info-popover>
            </span>
            <input type="text" style="margin-right: 2px;" placeholder="id or regex of shape"
                class="gf-form-input width-8" ng-model="rule.getShapeMapOptions().metadata"
                title="Enter a metadata name or a regex"
                bs-typeahead="editor.getCellNamesTypeHead" ng-blur="editor.onRulesChange()" data-min-length="0"
                data-items="100" ng-model-onblur data-placement="right" />
        </div>
        <!-- ID Regular expression -->
        <div class="gf-form">
            <gf-form-switch class="gf-form" label="Regular expression" label-class="width-11"
                checked="rule.getShapeMapOptions().enableRegEx" on-change="editor.onRulesChange()"
                tooltip="Disable this option if you don't use regular expressions in field 'What' below to improve performance">
            </gf-form-switch>
        </div>
        <ng-include src="GFPlugin.getPartialPath() + 'rules/shapes/shapesTable.html'"> </ng-include>
    </div>
</div>
